<template>
    <rui-page :defines="defines">
        <rui-query :label-width="150"
                   ref="searchForm"
                   :query="queryData"
                   :query-rows="searchFormOptions"
                   :more-rows="moreRows"
        />

        <rui-table
            :defineId="'defineProductAtom'"
            :fixedLeft="['action']"
            :showIndex="false"
            :select="false"
            :columns="atomColumns"
            :slots="[{key:'action',slot:'action'}]"
            @loadDatas="queryData"
            ref-query="searchForm"
            ref="atomTable"
        >
            <template slot="toolBar">
                <Button @click="add" icon="md-add" type="primary">新增</Button>
            </template>
            <template slot="action" slot-scope="{ row }">
                <div>
                    <Button @click="edit(row)" size="small" type="primary">编辑</Button>
                    <Button type="error" size="small" @click="remove(row)"
                            v-if="row.atomIsDefault=='0' || row.atomIsReference=='0'">删除
                    </Button>
                    <circleLoading v-if="operationLoading"/>
                </div>
            </template>
        </rui-table>
        <Modal
            v-model="atomModalVisible"
            :title="modalTitle"
            :closable="false"
            :width="1100"
            :mask-closable="false"
            @on-ok="atomSubmit"
        >
            <rui-form :form-options="atomFormOptions" :read-only="false" :after-change="afterChange" ref="atomForm"></rui-form>
            <div slot="footer">
                <Button size="small" @click="atomModalVisible = false">取消</Button>
                <Button type="primary" size="small" :loading="submitLoading" @click="atomSubmit">保存</Button>
            </div>
        </Modal>
    </rui-page>
</template>
<script>
    import productAtomDefine from "../defines/product-atom-define";
    import circleLoading from "_c/circle-loading/circle-loading.vue";
    import {
        getProductList,
        addAtom,
        editAtom,
        deleteAtom
    } from "@/projects/afs-core-business/api/afs-product/product/productAtom";
    import {deepClone} from "@/libs/utils/ObjectClone";

    export default {
        name: "product-atom",
        components: {
            circleLoading
        },
        data() {
            return {
                operationLoading: false,
                atomModalVisible: false,
                submitLoading: false,
                modalTitle: "产品原子新增",
                searchFormOptions: [
                    {defineId: "defineProductAtom", span: 6, fields: ["atomName", "atomShowType", "atomControlType"]},

                ],
                moreRows: [
                    {defineId: "defineProductAtom", span: 6, fields: ["controlDictionaryType", "atomIsDefault", "atomTemplateCategory"]},
                    {defineId: "defineProductAtom", span: 6, fields: ["atomKey", "isProductModify"]}
                ],
                atomFormOptions: [
                    {
                        grids: [
                            {defineId: "defineProductAtom", span: 12, fields: ["atomKey", "atomShowType", "atomControlType", "controlDictionaryType"]},
                            {defineId: "defineProductAtom", span: 12, fields: ["atomName", "atomTemplateCategory", "isProductModify", "atomIsDefault"]},
                        ]
                    }
                ],
                atomColumns: [
                    'action', 'atomName', 'atomShowType', 'atomControlType', 'controlDictionaryType', 'atomIsDefault', 'atomTemplateCategory', 'atomKey', 'isProductModify'
                ],

            };
        },
        computed: {
            defines() {
                return [
                    {
                        id: "defineProductAtom",
                        fields: productAtomDefine
                    }
                ];
            }
        },
        methods: {
            queryData(queryData) {
                console.log(queryData);
                getProductList(queryData).then(res => {
                    if (res.code === "0000") {
                        let {records, total} = res.data;
                        this.$refs.atomTable.updateTableData(records, total);
                    }
                });
            },
            refresh() {
                this.$refs['atomTable'].reloadData();
            },
            afterChange(key, newValue) {
                if ('atomControlType' === key  ) {
                    if(("01" === newValue || "00" === newValue)){
                        this.$refs.atomForm.setFiledHide('controlDictionaryType', false);
                    }else{
                        this.$refs.atomForm.setFiledHide('controlDictionaryType', true);
                    }
                }
            },
            atomSubmit() {
                this.$refs.atomForm.getForm().validate(valid => {
                    if (valid) {
                        if (this.modalType === 0) {
                            this.submitLoading = true;
                            addAtom(this.$refs.atomForm.getFormData())
                                .then(res => {
                                    this.submitLoading = false;
                                    if (res.code === "0000") {
                                        this.$Message.success("操作成功");
                                        this.atomModalVisible = false;
                                        this.refresh();
                                    }
                                }).catch(() => {
                                this.submitLoading = false;
                            });

                        } else {
                            // 编辑
                            this.submitLoading = true;
                            editAtom(this.$refs.atomForm.getFormData())
                                .then(res => {
                                    this.submitLoading = false;
                                    if (res.code === "0000") {
                                        this.$Message.success("操作成功");
                                        this.atomModalVisible = false;
                                        this.refresh();
                                    }
                                }).catch(() => {
                                this.submitLoading = false;
                            });

                        }
                    }
                });
            },
            remove(v) {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除原子名称: " + v.atomName + " ?",
                    onOk: () => {
                        this.operationLoading = true;
                        deleteAtom(v.id).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                this.refresh();
                            }
                        }).catch(() => {
                            this.operationLoading = false;
                        });
                    }
                });
            },
            add() {
                this.modalType = 0;
                this.modalTitle = "新增";
                this.atomModalVisible = true;
                this.$refs.atomForm.setAllFieldRequired(true);
                this.$refs.atomForm.setFieldReadOnly('controlDictionaryType', false);
                this.$refs.atomForm.setFieldReadOnly('atomControlType', false);
                this.$refs.atomForm.setFieldReadOnly('atomShowType', false);
                this.$refs.atomForm.setFieldReadOnly('atomKey', false);
                this.$nextTick(() => {
                    this.$refs.atomForm.resetFrom();
                })
            },
            edit(row) {
                this.modalType = 1;
                this.modalTitle = "编辑";
                this.$refs.atomForm.resetFrom();
                this.$refs.atomForm.updateFormData(deepClone(row));
                this.$refs.atomForm.setAllFieldRequired(true);
                let atomControlType = row.atomControlType;
                let atomIsReference = row.atomIsReference;
                this.$refs.atomForm.setFieldReadOnly('atomKey', true);
                if ("1" === atomIsReference) {
                    this.$refs.atomForm.setFieldReadOnly('controlDictionaryType', true);
                    this.$refs.atomForm.setFieldReadOnly('atomControlType', true);
                    this.$refs.atomForm.setFieldReadOnly('atomShowType', true);
                } else {
                    this.$refs.atomForm.setFieldReadOnly('controlDictionaryType', false);
                    this.$refs.atomForm.setFieldReadOnly('atomControlType', false);
                    this.$refs.atomForm.setFieldReadOnly('atomShowType', false);
                }
                this.atomModalVisible = true;
            },
        },
        mounted() {
            this.refresh();
        }
    };
</script>
